<template>
  <div>
    <navs :isDark="true"></navs>
    <div class="cont">
      <div class="flex-stbox">
        <div class="Data">{{ $t("datacenter.title") }}</div>
        <img src="../assets/image/home/1.png" class="home2" alt="" />
      </div>
      <div class="RSC">
        <div class="flex-st">
          <img src="../assets/image/other/svg3.png" class="" alt="" />
          <div>{{ miningData.AIMENFTAmount || 0 }}</div>
        </div>
        <div class="text">{{ $t("datacenter.nftAmount") }}</div>
      </div>
      <div class="RSC">
        <div class="flex-st">
          <img src="../assets/image/other/svg4.png" class="" alt="" />
          <div>{{ miningData.baseMints || 0 }}</div>
        </div>
        <div class="text">{{ $t("datacenter.baseMints") }}</div>
      </div>
      <div class="RSC">
        <div class="flex-st">
          <img src="../assets/image/other/svg5.png" class="" alt="" />
          <div>{{ miningData.burnAime || 0 }}</div>
        </div>
        <div class="text">{{ $t("datacenter.burnAime") }}</div>
      </div>
      <div class="RSC">
        <div class="flex-st">
          <img src="../assets/image/other/svg6.png" class="" alt="" />
          <div>{{ miningData.burnMintRate || 0 }}%</div>
        </div>
        <div class="text">{{ $t("datacenter.burnMintRate") }}</div>
      </div>
    </div>

    <foot></foot>
  </div>
</template>

<script>
import navs from "../components/nav.vue";
import foot from "./components/foot.vue";
import { AIMEMainContract, web3 } from "@/assets/js/web3.js";
export default {
  components: {
    navs,
    foot,
  },
  data() {
    return {
      numbers: 0,
      miningData: {
        AIMENFTAmount: null, // 全网AIMENFT数量
        baseMints: null, // 当日基础铸造量
        burnAime: null, // 昨日销毁量
        burnMintRate: null, // 销毁铸造量比例
      },
    };
  },
  async mounted() {
    console.log(11);
    await this.loadMiningData();
  },
  methods: {
    async loadMiningData() {
      try {
        const result = await AIMEMainContract.methods
          .queryDailyMiningData()
          .call();
        console.log(result);
        this.miningData = {
          AIMENFTAmount: Number(result.AIMENFTAmount).toFixed(2),
          baseMints: Number(
            web3.utils.fromWei(result.baseMints, "ether")
          ).toFixed(2),
          burnAime: Number(
            web3.utils.fromWei(result.burnAime, "ether")
          ).toFixed(2),
          burnMintRate: Number(result.burnMintRate).toFixed(2),
        };
      } catch (error) {
        console.error("获取全网数据失败:", error);
      } finally {
      }
    },
  },
};
</script>
<style lang="less" scoped>
.cont {
  padding: 0 36px;
  background: #121212;
  font-weight: 400;
  font-size: 28px;
  color: #a1a1a1;
  .flex-stbox {
    font-size: 48px;
    color: #ededed;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .Data {
      font-weight: 400;
      font-size: 48px;
      color: #ededed;
      // margin-left: 30px;
      flex: 0 0 200px;
      margin-top: 150px;
    }
  }
  .home2 {
    flex: 1; /* 占据剩余空间 */
    max-width: 644px;
    margin-left: -100px;
  }
}
.RSC {
  padding: 28px 34px;
  border-radius: 16px 16px 16px 16px;
  border: 2px solid #212121;
  font-weight: 500;
  font-size: 40px;
  color: #ededed;
  margin-top: 16px;
  img {
    width: 80px;
    height: 80px;
    margin-right: 30px;
  }
  .text {
    font-size: 28px;
    color: #a1a1a1;
    margin-top: 16px;
  }
}
</style>
